<!-- 指定单元的危险源空间分布图，svg矢量图显示 -->
<template>
  <div
    :id="mode"
    style="width: 80vw; min-width: 100%; min-height: 300px; height: calc(100vh - 200px)"
  >
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import * as echarts from 'echarts';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getFileApi } from '/@/api/platform/file';
  import { queryEnumOptions } from '/@/api/platform/enum';
  export default defineComponent({
    props: ['mode', 'svgData'],
    setup(props, {}) {
      const { uploadUrl } = useGlobSetting();
      const getImageFileUrlPrefix = ref(uploadUrl + getFileApi);
      onMounted(() => {
        let riskLevelOptions = [];
        queryEnumOptions('EhsRiskLevelEnum').then((res) => {
          // console.log('option res', res);
          if (res != undefined && res != null && res.length > 0x0) {
            const riskOp = res[0].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute.split('"')[3],
              };
            });
            riskLevelOptions = riskOp;
          }
        });

        console.log('mount');
        let chartDom = document.getElementById(props.mode);
        let myChart = echarts.init(chartDom);
        let option;
        if (props.svgData) {
          fetch(getImageFileUrlPrefix.value + props.svgData)
            .then((response) => response.text())
            .then((svg) => {
              echarts.registerMap('危险源空间分布图', { svg: svg });
              option = {
                title: {
                  text: '危险源空间分布图', //标题文本内容
                  // subtext: 'intro', //副标题文本内容
                  x: 'center',
                  y: 'top',
                },
                tooltip: {
                  show: true, // 是否显示文本标签
                  // extraCssText: 'width:180px;',
                  backgroundColor: '#fff',
                  borderColor: '#fff',
                  padding: 15,
                  formatter: function (params) {
                    console.log(params, 'params');
                    return (
                      '单元名称: <b>' +
                      params.name +
                      '</b><br>' +
                      '风险等级  : ' +
                      `<b>${
                        riskLevelOptions.filter((item) => item.value == params.value)[0].text
                      }</b>`
                    );
                  },
                },
                visualMap: {
                  left: 'center',
                  min: 1,
                  max: 4,
                  orient: 'horizontal',
                  text: ['级', '危险程度'],
                  realtime: true,
                  // calculable: true,
                  inRange: {
                    color: ['#66B9FF', '#FAE836', '#FFAD27', '#DA2828'],
                  },
                },
                series: [
                  {
                    name: '危险源空间分布图',
                    type: 'map',
                    map: '危险源空间分布图',
                    silent: false, //鼠标移入区域变色 如果设置为true则无法高亮
                    roam: true,
                    areaColor: '#fdd', //鼠标滑过区域颜色
                    emphasis: {
                      itemStyle: {
                        areaColor: 'none', //鼠标滑过区域颜色
                        shadowBlur: 10, //发光图形阴影的模糊大小
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 147, 252, 0.4)', //阴影颜色
                      },
                      show: true,
                      label: {
                        show: false,
                      },
                    },
                    selectedMode: false,
                    data: [
                      { name: '厨房', value: 3, introduction: '这是厨房' },
                      { name: '公厕', value: 1, introduction: '这是厕所' },
                      { name: '职工住宿楼', value: 2, introduction: '这是职工住宿楼' },
                      { name: '发电机房', value: 4, introduction: '这是发电机房' },
                      { name: '老办公大楼', value: 2, introduction: '这是老办公大楼' },
                      { name: '二楼水文监测科仓库', value: 1, introduction: '这是水文监测科仓库' },
                      { name: '新办公大楼', value: 1, introduction: '这是新办公大楼' },
                      { name: 'UPS间', value: 4, introduction: '这是UPS间' },
                      { name: '老职工住宿', value: 3, introduction: '这是老职工住宿' },
                    ],
                  },
                ],
              };
              myChart.setOption(option);
            });
          option && myChart.setOption(option);
        }
      });
      return {};
    },
  });
</script>

<style scoped></style>
